<template>
	<view v-if="requsetStatus">
		<view class="middle">
			<view class="item">
				<view class="title">
					基本信息
				</view>
				<view class="content">
					<hr>
					<!-- 姓名 -->
					<view class="item item-residence">
						<view>
							姓名
						</view>
						<view class="residence">
							<input @input="onNameInput" placeholder="请输入您的姓名" :value="name" />
						</view>
					</view>
					<hr>
					<!-- 昵称 -->
					<view class="item item-residence">
						<view>
							昵称
						</view>
						<view class="residence">
							<input @input="onNickNameInput" placeholder="请输入您的昵称" :value="nickName" />
						</view>
					</view>
					<hr>
					<!-- 性别 -->
					<view class="item">
						<view class="itemLeft">
							性别
						</view>
						<view class="uni-list itemReight red">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindsexChange" :value="sex" :range="sexList">
										<view v-show="!sexInfo" class="">
											请选择 &gt;
										</view>
										<view class="uni-input">{{sexInfo}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<hr>
					<!-- 出生日期 -->
					<view class="item">
						<view class="itemLeft">
							出生日期
						</view>
						<view class="uni-list itemReight red">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker mode="date" :value="date" :start="startDate" :end="endDate"
										@change="bindDateChange">
										<view v-show="!date" class="">
											请选择 &gt;
										</view>
										<view class="uni-input">{{date}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<hr>
					<!-- 学历 -->
					<view class="item">
						<view class="itemLeft">
							学历
						</view>
						<view class="uni-list itemReight red">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindeducationChange" :value="education" :range="educationList">
										<view v-show="!educationInfo" class="">
											请选择 &gt;
										</view>
										<view class="uni-input">{{educationInfo}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<hr>
					<!-- 居住地 -->
					<view class="item item-residence">
						<view>
							居住地
						</view>
						<view class="residence">
							<input @input="onResidenceInput" placeholder="请输入您的居住地" :value="residence" />
						</view>
					</view>
					<hr>
					<!-- 身高 -->
					<view class="item item-residence">
						<view>
							身高
						</view>
						<view class="residence">
							<input @input="onHeightInput" placeholder="请输入您的身高(单位:cm)" :value="height" />
						</view>
					</view>
					<hr>
					<!-- 部门 -->
					<view class="item item-residence">
						<view>
							部门
						</view>
						<view class="residence">
							<input @input="onIndustryInput" placeholder="请输入您所在部门" :value="industry" />
						</view>
					</view>
					<hr>
					<!-- 职位 -->
					<view class="item item-residence">
						<view>
							职位
						</view>
						<view class="residence">
							<input @input="onPositionInput" placeholder="请输入您的职位" :value="position" />
						</view>
					</view>
					<hr>
				</view>
			</view>
			<view class="wrap"></view>
			<view class="item">
				<view class="title">
					补充信息
				</view>
				<view class="content">
					<hr>
					<view class="item">
						<view class="itemLeft">
							户籍
						</view>
						<view class="uni-list itemReight red">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="pickerChange" :value="multiIndex" :range="newProvinceDataList"
										mode="multiSelector" @columnchange="pickerColumnchange">
										<view v-show="!select" class="">
											请选择 &gt;
										</view>
										<view class="uni-input">{{select}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<hr>
					<view class="item">
						<view class="itemLeft">
							是否购房
						</view>
						<view class="uni-list itemReight red">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindHouseChange" :value="house" :range="houseList">
										<view v-show="!houseInfo" class="">
											请选择 &gt;
										</view>
										<view class="uni-input">{{houseInfo}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<hr>
					<view class="item">
						<view class="itemLeft">
							是否购车
						</view>
						<view class="uni-list itemReight red">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindCarChange" :value="car" :range="carList">
										<view v-show="!carInfo" class="">
											请选择 &gt;
										</view>
										<view class="uni-input">{{carInfo}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<hr>
					<view class="item">
						<view class="itemLeft">
							月收入
						</view>
						<view class="uni-list itemReight red">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindMoneyChange" :value="money" :range="moneyList">
										<view v-show="!moneyInfo" class="">
											请选择 &gt;
										</view>
										<view class="uni-input">{{moneyInfo}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
					<hr>
					<view class="item">
						<view class="itemLeft">
							婚姻
						</view>
						<view class="uni-list itemReight red">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindWeddingChange" :value="wedding" :range="weddingList">
										<view v-show="!weddingInfo" class="">
											请选择 &gt;
										</view>
										<view class="uni-input">{{weddingInfo}}</view>
									</picker>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 我的介紹 -->
			<view class="item">
				<view class="title">
					我的介绍
				</view>
				<view class="content">
					<textarea :value="intro" maxlength="200" placeholder="请用一段话介绍自己" class="box"
						@blur="bindIntroAreaBlur" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					兴趣爱好
				</view>
				<view class="content">
					<textarea :value="hobby" placeholder="请用一段话描述您的兴趣爱好" class="box" maxlength="50"
						@blur="bindHobbyAreaBlur" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					感情观
				</view>
				<view class="content">
					<textarea :value="emotional " placeholder="请用一段话描述您的感情观" class="box" maxlength="200"
						@blur="bindEmotionalAreaBlur" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					心怡的Ta
				</view>
				<view class="content">
					<textarea :value="demand" placeholder="请用一段话描述您心怡的Ta" class="box" maxlength="200"
						@blur="bindDemandAreaBlur" />
				</view>
			</view>
			<view class="item">
				<view class="title">
					上传生活照<text class="limte">（最多9张）</text>
				</view>
				<view class="content-special">
					<uImg ref="upimg" :canUploadFile="true" :limit="limitNum" :uImgList.sync="uImgList"
						@uploadSuccess="uploadSuccess">
					</uImg>

				</view>
			</view>
		</view>
		<button @click="handleSubmitForm" class="bred">保存</button>
	</view>
</template>

<script>
	import uImg from '@/components/zhtx-uploadImg/zhtx-uploadImg.vue';
	import provinceData from '@/static/data/provinceData.js';
	let toast = msg => {
		uni.showToast({
			title: msg,
			icon: 'none'
		});
	}
	export default {
		data() {
			return {
				title: 'picker',
				name: '', //姓名
				nickName: '', //昵称
				sex: -1, //性别下标
				sexList: ['男', '女'],
				sexInfo: '',
				date: '',
				education: -1, //学历下标
				educationList: ['专科', '本科', '硕士', '博士', '博士后'],
				educationInfo: '',
				residence: '', //居住地
				height: '', //身高
				industry: '', //部门
				position: '', //职位
				oldpProvinceDataList: provinceData.data,
				newProvinceDataList: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				select: '',
				intro: '', //自我介绍
				hobby: '', //兴趣爱好
				demand: '', //对对方要求
				house: -1, //住房下标
				houseList: ["是", "否"],
				houseInfo: '',
				car: -1,
				carList: ["是", "否"],
				carInfo: '',
				money: -1,
				moneyList: ["8000以下", "8000-10000", "10001-15000", "15001-20000", "20001-25000", "25001-30000", "30000以上"],
				moneyInfo: '',
				wedding: -1, //婚姻下标
				weddingList: ["未婚", "已婚", "离异", "其他"],
				weddingInfo: '',
				emotional: '',
				msg: '',
				limitNum: 9,
				uImgList: [],
				imgList: [],
				improveInfoAjax: false,
				telephone: '',
				user_id: '',
				isOldUser: false,
				requsetStatus: false,
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync("UserInfo");
			let {
				phone,
				uid
			} = userInfo;
			this.telephone = phone;
			this.user_id = uid;
			this.getProvinceDate()
			this.getUsersInfo()
		},
		components: {
			uImg
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},

		methods: {
			getUsersInfo() {
				uni.showLoading({
					title: '正在加载中'
				})
				let h = {
					user_id: this.user_id
				}
				this.$api.users_get(h).then((res) => {
						console.log(res, 'resss')
						let userInfoIntro = res.data.data[0]
						if (userInfoIntro) {
							this.isOldUser = true
							this.name = userInfoIntro.realName
							this.nickName = userInfoIntro.nickName
							this.sexInfo = userInfoIntro.sex
							this.date = userInfoIntro.birth
							this.educationInfo = userInfoIntro.education
							this.residence = userInfoIntro.address
							this.height = userInfoIntro.height
							this.industry = userInfoIntro.department
							this.position = userInfoIntro.position
							this.select = userInfoIntro.redidence
							this.intro = userInfoIntro.intro
							this.hobby = userInfoIntro.hobby
							this.demand = userInfoIntro.demand
							this.houseInfo = userInfoIntro.isHouse
							this.carInfo = userInfoIntro.isCar
							this.moneyInfo = userInfoIntro.money
							this.weddingInfo = userInfoIntro.wedding
							this.emotional = userInfoIntro.emotional
							this.uImgList = userInfoIntro.imgList
						}
						this.requsetStatus = true
						uni.hideLoading()
					})
					.catch((res) => {
						console.log(res, 'pppppppp')
						this.requsetStatus = true
						uni.hideLoading()
					})
			},
			onNameInput(e) {
				this.name = e.target.value
			},
			onNickNameInput(e) {
				this.nickName = e.target.value
			},
			bindsexChange(e) {
				this.sex = e.target.value
				this.sexInfo = this.sexList[this.sex]
			},
			bindDateChange(e) {
				this.date = e.target.value
			},
			bindeducationChange(e) {
				this.education = e.target.value
				this.educationInfo = this.educationList[this.education]
			},
			onResidenceInput(e) {
				this.residence = e.target.value
			},
			onHeightInput(e) {
				this.height = e.target.value
			},
			onIndustryInput(e) {
				this.industry = e.target.value
			},
			onPositionInput(e) {
				this.position = e.target.value
			},
			getProvinceDate() {
				for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
					this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
				}
				for (let i = 0; i < this.oldpProvinceDataList[0].city.length; i++) {
					this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
				}
				for (let i = 0; i < this.oldpProvinceDataList[0].city[0].area.length; i++) {
					this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
				}
			},
			uploadSuccess(result) {
				if (result.code == 200) {
					//上传成功的回调处理
					toast('上传成功')
					this.imgList = result.list
					this.upFile()
				} else {
					toast('上传失败')
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 省市区确认事件
			pickerChange(e) {
				this.multiIndex = e.detail.value;
				this.select =
					`${this.newProvinceDataList[0][this.multiIndex[0]]}--${this.newProvinceDataList[1][this.multiIndex[1]]}--${this.newProvinceDataList[2][this.multiIndex[2]]}`
			},
			pickerColumnchange(e) {
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item, index) => {
						return item.name
					})
					if (this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1) {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,
							index) => {
							return item
						})
					} else {
						this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[
							1]].area.map((item, index) => {
							return item
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if (e.detail.column === 1) {
					this.multiIndex[1] = e.detail.value
					this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]]
						.area.map((item, index) => {
							return item
						})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if (e.detail.column === 2) {
					this.multiIndex[2] = e.detail.value
				}
			},
			bindIntroAreaBlur(e) {
				this.intro = e.detail.value
			},
			bindHobbyAreaBlur(e) {
				this.hobby = e.detail.value
			},
			bindDemandAreaBlur(e) {
				this.demand = e.detail.value
			},
			bindHouseChange(e) {
				this.house = e.target.value
				this.houseInfo = this.houseList[this.house]
			},
			bindCarChange(e) {
				this.car = e.target.value
				this.carInfo = this.carList[this.car]
			},
			bindMoneyChange(e) {
				this.money = e.target.value
				this.moneyInfo = this.moneyList[this.money]
			},
			bindWeddingChange(e) {
				this.wedding = e.target.value
				this.weddingInfo = this.weddingList[this.wedding]
			},
			bindEmotionalAreaBlur(e) {
				this.emotional = e.target.value
			},
			//上传方法的调用

			handleSubmitForm() {
				if (this.name.trim() === '') {
					toast('请输入您的姓名')
					return false
				}
				if (this.nickName.trim() === '') {
					toast('请输入您的昵称')
					return false
				}
				if (this.sexList[this.sex] === '') {
					toast('请选择您的性别')
					return false
				}
				if (this.date === '') {
					toast('请选择您的出生日期')
					return false
				}
				if (this.educationList[this.education] === '') {
					toast('请选择您的学历')
					return false
				}
				if (this.residence.trim() === '') {
					toast('请输入您的居住地')
					return false
				}
				if (this.height.trim() === '') {
					toast('请输入您的身高')
					return false
				}
				if (this.industry.trim() === '') {
					toast('请输入您所在部门')
					return false
				}
				if (this.position.trim() === '') {
					toast('请输入您现在的职位')
					return false
				}
				if (this.select.trim() === '') {
					toast('请选择您的户籍所在地')
					return false
				}
				if (this.houseList[this.house] === '') {
					toast('请选择您是否购房')
					return false
				}
				if (this.carList[this.car] === '') {
					toast('请选择您是否购车')
					return false
				}
				if (this.moneyList[this.money] === '') {
					toast('请选择您的月薪')
					return false
				}
				if (this.weddingList[this.wedding] === '') {
					toast('请选择您的婚姻状况')
					return false
				}
				if (this.intro.trim() === '') {
					toast('请介绍一下自己')
					return false
				}
				if (this.hobby.trim() === '') {
					toast('请填写您的个人爱好')
					return false
				}
				if (this.emotional.trim() === '') {
					toast('请描述一下您的感情观')
					return false
				}
				if (this.demand.trim() === '') {
					toast('请描述一下您心仪的Ta')
					return false
				}
				if (this.uImgList === []) {
					toast('请上传您的个人生活照')
				}
				if (this.improveInfoAjax) {
					return false
				}
				this.improveInfoAjax = true;
				this.$refs.upimg.upload()
			},
			upFile() {
				uni.showLoading()
				if (this.isOldUser) {
					this.undateUserInfo()
				} else {
					this.createUserInfo()
				}
			},
			undateUserInfo() {
				this.$api.undate_users({
					user_id: this.user_id,
					nickName: this.nickName,
					realName: this.name,
					birth: this.date,
					height: this.height,
					education: this.educationInfo,
					intro: this.intro,
					hobby: this.hobby,
					demand: this.demand,
					address: this.residence,
					isCar: this.carInfo,
					isHouse: this.houseInfo,
					position: this.position,
					department: this.industry,
					redidence: this.select,
					updatetime: new Date().toLocaleString(),
					sex: this.sexInfo,
					money: this.moneyInfo,
					wedding: this.weddingInfo,
					imgList: this.imgList,
					emotional: this.emotional
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					})
					uni.switchTab({
						url: '/pages/my/my'
					})
				})
			},
			createUserInfo() {
				this.$api.create_users({
					user_id: this.user_id,
					telephone: this.telephone,
					nickName: this.nickName,
					realName: this.name,
					birth: this.date,
					height: this.height,
					education: this.educationInfo,
					intro: this.intro,
					hobby: this.hobby,
					demand: this.demand,
					address: this.residence,
					isCar: this.carInfo,
					isHouse: this.houseInfo,
					position: this.position,
					department: this.industry,
					redidence: this.select,
					addtime: new Date().toLocaleString(),
					sex: this.sexInfo,
					money: this.moneyInfo,
					wedding: this.weddingInfo,
					imgList: this.imgList,
					emotional: this.emotional
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: '创建成功',
						icon: 'none'
					})
					uni.switchTab({
						url: '/pages/my/my'
					})
				})
			}
		},
	}
</script>

<style>
	hr {
		background-color: #dedede;
	}

	.middle .item .title {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 42rpx;
		margin: 21rpx 0;
		padding-left: 31rpx;
		border-left: 7rpx solid #ff7a59;
	}

	.middle .item .content {
		padding: 0 31rpx 0rpx 31rpx;
		overflow: hidden;
	}

	.content-special {
		margin: 15rpx 31rpx;
		overflow: hidden;
	}

	.middle .item .content .item {
		height: 106rpx;
		line-height: 106rpx;
	}

	.middle .item .content .itemLeft {
		float: left;
	}

	.middle .item .content .itemReight {
		float: right;
	}

	.red {
		color: #000000;
	}

	.middle .wrap {
		height: 24rpx;
		background-color: #f1f1f1;
	}

	.box {
		color: #323232;
		font-size: 26rpx;
		padding: 20rpx 15rpx;
		border-radius: 30rpx;
		background-color: #f8f8f8;
		width: 100%;
	}

	.bred {
		background-color: #ff5757;
		color: #fff;
	}

	.content uni-view uni-text {
		font-size: 0 !important;
		color: #f00 !important;
	}

	.limte {
		color: #828282;
	}

	.item-residence {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.residence {
		text-align: right;
		width: 20rpx;
		height: 100%;
		flex-grow: 1;
		padding-left: 24rpx;
	}

	.residence input {
		width: 100%;
		height: 100%;
	}
</style>
